<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <button @click="btnClick(item)" v-for="item in btnTextList"> {{item}} </button>

        <h1> {{ before }} {{ calc }} {{ back }} {{res ? ' = ' + res : ''}} </h1>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                btnTextList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '+', '-', '*', '/', '=', 'C'],
                before: '', // 前面值
                calc: '', // 运算符
                back: '', // 后面值
                res: '', // 运算结果
            }
        },
        methods: {
            btnClick(val) {
                // console.log('被点击了', val);
                if (val == "+" || val == '-' || val == '*' || val == '/') {
                    // 点击的是运算符号
                    this.calc = val
                } else if (val == '=') {
                    // 计算结果
                    switch (this.calc) {
                        case '+':
                            this.res = this.before * 1 + this.back * 1
                            break;
                        case '-':
                            this.res = this.before * 1 - this.back * 1
                            break;
                        case '*':
                            this.res = (this.before * 1) * (this.back * 1)
                            break;

                        case '/':
                            this.res = (this.before * 1) / (this.back * 1)
                            break;

                        default:
                            break;
                    }
                } else if (val == 'C') {
                    // 点击了清空按钮
                    this.before = ''
                    this.calc = ''
                    this.back = ''
                    this.res = ''
                } else {
                    // 点击是数字
                    if (this.calc) {
                        this.back += val
                    } else {
                        this.before += val
                    }
                }
            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>